<template>
  <div class="container">
    <section class="top">
      <img :src="url_head + product.pic" alt />
      <div class="top__right">
        <section>
          <p class="hot">热销</p>
          <h3>{{product.name}}</h3>
          <p class="amount">价格:{{originalPrice}}</p>
         <!-- <p class="amount">利润:{{originalPrice - price}}</p> -->
         <!-- <p>周期:</p> -->
          <p>
            售价:
            <span class="amount">{{price}}元/个</span>
          </p>
        </section>
        <section class="actions">
          <el-input-number v-model="count" :min="1" :max="10" label="描述文字" />
          <el-button type="primary" size="small"  @click="payQuick">立即购买</el-button>
        </section>
      </div>
    </section>
    <el-divider />
    <section class="under">
      <h2>商品详情</h2>
      <div class="pic-box">
        <img
          :src="url_head + item.pic"
          alt
          v-for="(item, index) in pic_list"
          :key="index"
        />
      </div>
    </section>
  </div>
</template>
<script >
  import { doInfo } from '@/apis/product';
  import { doOrderList, doOrderProduceList } from '@/apis/order';
  export default {
    name: 'HotlistsInfo',
    data() {
      return {
        url_head: 'http://121.199.12.118:8083',
        pic_list: [],
        originalPrice: 0,
        price: 0,
        count: 1,
        product: {},
        order_list: [],
        limit: 10
      };
    },
    methods: {
      async payQuick() {
        this.$router.push({
          path: '/payinfo',
          query: { count: this.count, price: this.price, product: this.product }
        });
      },
      async fetchInfo() {
        const params = { productId: this.$route.query.id };
        const res = await doInfo(params);
        console.log('product info----');
        console.log(res.data);
        if (res.data.pics.length !== 0) {
          this.pic_list = res.data.pics;
        } else {
          this.pic_list = [{ pic: res.data.pic }];
        }
        if ((res.data.pic === undefined) || (res.data.pic == null)) {
          return;
        }
        if (res.data.pic.indexOf('/var/upload') !== -1) {
          this.url_head = 'http://121.199.12.118:8083';
        } else {
          this.url_head = '';
        }
        // console.log(this.pic_list);
        // console.log(this.url_head);
        // console.log(JSON.stringify(res.data));
        if (Object.prototype.hasOwnProperty.call(res.data, 'price')) {
          this.price = res.data.price;
        }
        if (Object.prototype.hasOwnProperty.call(res.data, 'originalPrice')) {
          this.originalPrice = res.data.originalPrice;
        }
        // console.log(res.data);
        this.product = res.data;
      },
      async get_order_list() {
        const status = {};
        let data = {
          pageSize: this.limit,
          pageNum: 1,
          reqJson: JSON.stringify(status)
        };
        let res = await doOrderList(data);
        const tot_len = res.data.total;
        const tot_page = Math.ceil(tot_len / this.limit);
        let i = 0;
        let res_order;
        for (i = 0; i < tot_page; i++) {
          data = {
            pageSize: this.limit,
            pageNum: i + 1,
            reqJson: JSON.stringify(status)
          };
          res_order = await doOrderList(data);
          if ((res_order == null) || (res_order === undefined)) {
            continue;
          }
          // console.log(JSON.stringify(res));
          for (const value of res.data.list) {
            res = await doOrderProduceList({ reqJson: JSON.stringify({ orderId: value.id }) });
            if ((res == null) || (res.data.length === 0)) {
              continue;
            }
            if (parseInt(this.$route.query.id) === parseInt(res.data[0].id)) {
              this.order_list.push({ paystate: value.status, num: res.data[0].productQuantity, name: value.receiverName, paytotal: value.payAmount, paytime: value.createTime });
            }
            // console.log('ss---------------------------ss');
            // console.log(JSON.stringify(res));
          }
        }
      }
    },
    mounted() {
      this.fetchInfo();
      this.get_order_list();
    },
    created() {}
  };
</script>
<style lang="scss" type="text/scss" scoped>
.container {
  margin-top: 15px;
  padding: 15px;
  background: white;
}

.el-input-number {
  margin-bottom: 12px;
}

.amount {
  color: #f15a23;
  font-weight: bold;
  margin-left: 4px;
  font-size: 18px;
}

.top {
  @include h-btw();
  align-items: stretch;
  img {
    height: 300px;
    width: 300px;
    margin-right: 15px;
  }
  .top__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 0;
    flex-grow: 1;
    p {
      font-size: 14px;
    }
    .actions {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .el-button {
        margin-top: 6px;
      }
    }
  }
}

h2 {
  text-align: center;
}

.middle {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 40px;
  .el-table {
    margin-top: 20px;
  }
}

.hot {
  display: inline-block;
  color: white;
  background: red;
  padding: 4px 15px;
  font-weight: bold;
  margin-top: 0;
  border-radius: 15px;
}

.under {
  .pic-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      margin-top: 20px;
      width: 60%;
    }
  }
}
</style>
